<template>
  <div class="UseEnergyReportbox">
    <div class="leftbox">
      <el-input
      size="small"
      style="margin-bottom: 10px;"
      suffix-icon="el-icon-search"
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
        <el-tree
        class="filter-tree"
        :highlight-current="true"
        lazy
        :load="loadNode"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        ref="tree">
       </el-tree>
    </div>
    <div class="rightbox">
      <!-- 搜索栏 -->
      <div class="righttop">
        <div>
          <el-radio-group v-model="radio3" size="small">
            <el-radio-button label="2">月</el-radio-button>
            <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
          <span>
            <span v-if="radio3=='2'" class="zhi">
              <el-date-picker  v-model="value1" type="month" value-format="yyyy-MM" placeholder="选择开始月" size="small"></el-date-picker> 至
              <el-date-picker  v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择结束月" size="small"></el-date-picker>
            </span>
            <span v-else class="zhi">
              <el-date-picker  v-model="value3" type="year" value-format="yyyy" placeholder="选择开始年" size="small"></el-date-picker> 至
              <el-date-picker  v-model="value4" type="year" value-format="yyyy" placeholder="选择结束年" size="small"></el-date-picker>
            </span>
          </span>
        </div>
        <div>
          <el-button size="small" class="chongzhi">重 置</el-button>
          <el-button type="primary" size="small" @click="getdatalist(treevalue)">查 询</el-button>
        </div>
      </div>
      <!-- 右侧盒子主体 -->
      <div class="rightbody">
         <div class="bodyxunhuan" ref="bodyxunhuan">
          <!-- 新增报告盒子 -->
          <div class="addlittlebox">
            <div class="iconandtext">
              <div class="icon" @click="addroport">
                <i class="iconfont icon-jiahao1"></i>
              </div>
              <div class="text"  @click="addroport">新增报告</div>
            </div>
          </div>
          <!-- 列表循环盒子 -->
          <div class="addlittlebox" v-for="item in reportlist" :key="item.id">
            <div class="title">
              <span>{{item.dateString}}</span>
              <span><i class="iconfont icon-xiazai1"></i> </span>
            </div>
            <div class="nneghaobao">工厂能耗报告</div>
            <div class="image">
              <i class="iconfont icon-p"></i>
            </div>
            <div class="qiyename">{{ item.companyName }}</div>
            <div class="footerbuttor">
              <div><i class="el-icon-view" @click="openreport(item)"></i> </div>
              <div><i class="el-icon-edit"></i> </div>
              <div><i class="el-icon-delete" @click="dellist(item)"></i> </div>
            </div>
          </div>
         </div>
         <!-- 底部分页 -->
         <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="9"
                @current-change="getdatalist(treevalue)"
                :total="+totalCount">
          </el-pagination>
         </div>
         <!-- 新增报告弹窗 -->
         <el-dialog
          title="报告单维护"
          :visible.sync="dialogVisible"
          width="30%">
          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-row >
                <el-col :span="24">
                  <el-form-item label="企业">
                    <el-input v-model="form.companyName" placeholder="请选择企业"  size="small" style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                <el-col :span="24">
                  <el-form-item :label="radio3=='2'?'月份':'年份'">
                    <el-date-picker  v-model="form.dateString" :type="radio3=='2'?'month':'year'" style="width: 100%;"
                    :value-format="radio3=='2'?'yyyy-MM':'yyyy'" placeholder="选择日期" size="small" > </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                <el-col :span="24">
                  <el-form-item label="生成时间">
                    <el-date-picker  v-model="form.createDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" style="width: 100%;"> </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false" size="small">取 消</el-button> -->
            <el-button type="primary" @click="submit" size="small" style="width: 60%;">生 成</el-button>
          </span>
        </el-dialog>
        <!-- 浏览报告弹窗 -->
         <BianjiReport :radio3="radio3" :reportvalue="reportvalue" :treevalue="treevalue" ref="BianjiReport"></BianjiReport>
      </div>
    </div>
  </div>
</template>

<script>
import BianjiReport from './bianjireport.vue'

import {gettreelistapi,getroportlistapi,addreportlistapi,delreportlistapi}from '@/api/energy-consumption/factory-energy/UseEnergyReport'
export default {
  name: 'CallPoliceIndex',
  components: {
    BianjiReport
  },
  data() {
    return {
      radio3: '2',
      value2:'',
      value3: '',
      value1:'',
      value4: '',
      filterText:'',
      defaultProps: {
        label: 'bizOrgName',
        children:'sonList'
      },
      pageobj: {
        pageNo: 1,
        pageSize:9
      },
      totalCount: '',
      dialogVisible:false,
      form: {createDate:''},
      reportlist: [],
      treevalue: {},
      reportvalue:{}
    };
  },

  mounted() {
    this.gettime()
  },

  methods: {
    // 确认新增
    async submit() {
      const {companyId, bizManageNo, bizOrgNo}=this.treevalue
      const res = await addreportlistapi({ ...this.form, companyId, manageNo:bizManageNo, orgNo:bizOrgNo, dateType: this.radio3, })
      this.$message({
        type:res.code=='200'?'success':'warning',
        message:res.code=='200'?'新增成功':res.message
      })
      this.dialogVisible = false
      this.form.dateString=''
      this.getdatalist(this.treevalue)
    },
    // 树节点点击
    handleNodeClick(val) {
      this.treevalue=val
      this.getdatalist(val)
    },
    // 获取列表数据
    async getdatalist(val) {
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: this.$refs.bodyxunhuan
      });
      const { data: { list,totalCount } } = await getroportlistapi({
        dateType: this.radio3, orgNo: val.bizOrgNo, startDate: this.radio3 == '2' ? this.value1 : this.value3,
        endDate: this.radio3 == '2' ? this.value2 : this.value4,pageNo:this.pageobj.pageNo-1,pageSize:this.pageobj.pageSize
      })
      this.reportlist=list
      this.totalCount=totalCount
      loading.close()
    },
    // 添加报告
    addroport() {
      if (!this.treevalue.companyId) return this.$message.warning('当前企业不可添加报告')
      this.dialogVisible = true
      this.$set(this.form,'companyName',this.treevalue.bizOrgName)
    },
    //浏览报告
    openreport(item) {
      this.reportvalue = item
      this.$refs.BianjiReport.dialogVisible = true
      setTimeout(()=>this.$refs.BianjiReport.getbaogaolist(),100)
    },
    // 删除
    dellist(item) {
      this.$confirm('此操作将删除该报告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res= await delreportlistapi(item.id)
            this.$message({
              type: res.code == 200 ? 'success' : 'warning',
              message:res.code == 200 ?'删除成功':res.message
            })
            this.getdatalist(this.treevalue)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
  // 获取当前时间戳
   gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      this.value4 = year.toString()
      this.value3 = ((+this.value4)-1).toString()
      this.value2 = year + '-' + month
      this.value1 = year + '-' + '01'
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() // 日
      this.$set(this.form,'createDate',year + '-' + month + '-'+day)
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 树组件懒加载
    async loadNode(node, resolve) {
      const { data: { list } } = await gettreelistapi()
      if (node.level == 0) {
        return resolve(list)
      } else if (node.level>0) {
        const { data: { list } } = await gettreelistapi({ orgNo: node.data.bizOrgNo })
        return resolve(list)
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
};
</script>

<style scoped>
.UseEnergyReportbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    background-color: #fff;
    padding: 20px;
    margin-right: 10px;
  }
  .rightbox{
    height: 100%;
    width: calc(100% - 310px);
    .righttop{
      height: 80px;
      line-height: 80px;
      padding: 0 20px;
      background-color: #fff;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      span{
        margin-left: 10px;
      }
      .zhi{
        font-size: 14px;
        color: #606266;
      }
    }
    .rightbody{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 10px;
      .bodyxunhuan{
        height: 95%;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; 主轴上的对齐方式 */
        align-items: space-between; /* 交叉轴上的对齐方式 */
        .addlittlebox{
          width: calc(20% - 20px); /* 每行显示五个盒子，减去盒子之间的间距 */
          height: calc(50% - 20px); /* 两行盒子平分父容器的高度，减去盒子之间的间距 */
          margin: 10px; /* 盒子之间的间距 */
          border: 1px solid skyblue;
          border-radius: 5px;
          padding: 20px;
          .iconandtext{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #4095e5;
            .icon{
              .iconfont{
                font-size: 100px;
              }
            }
            .text, .icon{
              cursor: pointer;
            }
          }
          .title{
            display: flex;
            justify-content: space-between;
          }
          .nneghaobao{
            margin: 20px 0;
            color: #4095e5;
          }
          .image{
            text-align: center;
            .icon-p{
              font-size: 130px;
              font-weight: bold;
              color: #41cdaf;
            }
          }
          .qiyename{
            margin: 20px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .footerbuttor{
            padding :0 20px;
            display: flex;
            justify-content: space-between;
            i{
              cursor: pointer;
              font-size:18px;
            }
            .el-icon-view{
              color:#81b337;
            }
            .el-icon-edit{
              color:#1890ff;
            }
            .el-icon-delete{
              color:red;
            }
          }
        }
      }
      .fenye{
        display: flex;
        justify-content: flex-end;
       }
    }
  }
}
::v-deep .el-dialog__footer{
  text-align:center;
}
</style>